お手軽高機能！Closure UI【goog.ui.BidiInput】

お手軽高機能！Closure UI

#JavaScript

#HTML5

#Closure

#RIA

稲毛透

2012.10.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Closure Libraryに用意されている「goog.ui.BidiInput」は、ヘブライ語やアラビア語などの「RTL（Right To Left）」言語を判別して自動的に入力フィールドの向きを「RTL」にしてくれるUIコンポーネントです。

デモ

通常のテキストインプット

：「RTL言語」で入力した場合でも「LTR（Left To Right）」で入力されます。

BidiInput（decorate）

：「RTL言語」で入力した場合のみ「RTL」で入力されます。

BidiInput（render）

：「RTL言語」で入力した場合のみ「RTL」で入力されます。

BidiInput（textarea）

「RTL言語」で入力した場合のみ「RTL」で入力されます。

デモコード

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>goog.ui.BidiInput</title>
    <script type="text/javascript" src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
    <script type="text/javascript">
      goog.require('goog.ui.BidiInput');
    </script>
  </head>
  <body>
    <fieldset>
      <legend>通常のテキストインプット</legend>
      <input type="text" value="שלום, עולם!" />：「RTL言語」で入力した場合でも「LTR（Left To Right）」で入力されます。
    </fieldset>
    <fieldset>
      <legend>BidiInput（decorate）</legend>
      <input type="text" id="element1" value="שלום, עולם!" />：「RTL言語」で入力した場合のみ「RTL」で入力されます。
      <script type="text/javascript">
        var bi1= new goog.ui.BidiInput();
        bi1.decorate(goog.dom.getElement('element1'));
      </script>
    </fieldset>
    <fieldset>
      <legend>BidiInput（render）</legend>
      <span id="element2"></span>：「RTL言語」で入力した場合のみ「RTL」で入力されます。
      <script type="text/javascript">
        var bi2 = new goog.ui.BidiInput();
        bi2.render(goog.dom.getElement('element2'));
        bi2.setValue('שלום, עולם!');
      </script>
    </fieldset>
    <fieldset>
      <legend>BidiInput（textarea）</legend>
      <div dir="rtl"><textarea id="element3">שלום, עולם!</textarea></div>
      <div style="text-align:right;">「RTL言語」で入力した場合のみ「RTL」で入力されます。</div>
      <script type="text/javascript">
        var bi3 = new goog.ui.BidiInput();
        bi3.decorate(goog.dom.getElement('element3'));
      </script>
    </fieldset>
  </body>
</html>

使い方

BidiInputは「goog.ui.Component」のサブクラスなので、「render」メソッド（指定要素にBidiInputのinput要素を追加）または「decorate」メソッド（指定したinput要素にBidiInput機能を付与）を用います。

Closure Libraryのロード

<script type="text/javascript" src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script type="text/javascript">
  goog.require('goog.ui.BidiInput');
</script>

6行目: Closure Libraryのbase.jsをロードします。
（このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。）
7～9行目: 必要とするClosure Libraryを宣言します。ここでは今回利用する「goog.ui.BidiInput」のみを宣言しています。

BidiInputコンポーネントで装飾する

<input type="text" id="element1" value="שלום, עולם!" />：「RTL言語」で入力した場合のみ「RTL」で入力されます。
<script type="text/javascript">
  var bi1= new goog.ui.BidiInput();
  bi1.decorate(goog.dom.getElement('element1'));
</script>

18行目: 「装飾」対象のinput要素です。このinput要素にBidiInputの機能を付与します。
20行目: BidiInputクラスのインスタンスを生成します。
21行目: 対象のinput要素を引数としてBidiInputオブジェクトの「decorate」メソッドを呼び出すことで、対象input要素はBidiInputとなります。

BidiInputコンポーネントを描画する

<span id="element2"></span>：「RTL言語」で入力した場合のみ「RTL」で入力されます。
<script type="text/javascript">
  var bi2 = new goog.ui.BidiInput();
  bi2.render(goog.dom.getElement('element2'));
  bi2.setValue('שלום, עולם!');
</script>

26行目: BidiInputコンポーネントを挿入する対象のspan要素です。
28行目: BidiInputクラスのインスタンスを生成します。
29行目: 対象のspan要素を引数としてBidiInputオブジェクトの「render」メソッドを呼び出すことで、対象span要素にBidiInputコンポーネントのinput要素が挿入されます。
30行目: 挿入されたBidiInputコンポーネントに値（文字列）を設定しています。

textarea要素を装飾する

input要素同様に、BidiInputコンポーネントでtextarea要素も装飾できます。

<div dir="rtl"><textarea id="element3">שלום, עולם!</textarea></div>
<div style="text-align:right;">「RTL言語」で入力した場合のみ「RTL」で入力されます。</div>
<script type="text/javascript">
  var bi3 = new goog.ui.BidiInput();
  bi3.decorate(goog.dom.getElement('element3'));
</script>